<script setup>
import { ref, onMounted, nextTick, computed } from 'vue'
import UniFilePicker from "@/uni_modules/uni-file-picker/components/uni-file-picker/uni-file-picker.vue";
import { host } from "@/utils/config";

const props = defineProps({
  modelValue: {
    type: Array || Object,
    default: () => ([])
  },
  url: {
    type: String,
    default: ''
  },
  limit: {
    type: Number,
    default: 3
  },
  type: {
    type: String || Number,
    default: ''
  },
  item: {
    type: Object,
    default: () => ({})
  },
  returnType: {
    type: String,
    default: 'array'
  },
  urlField: {
    type: String,
    default: 'imgUrl'
  },
  typeField: {
    type: String,
    default: 'type'
  },
  del: {
    type: Boolean,
    default: true
  }
})
const emit = defineEmits(['update:modelValue', 'uploadDel'])
const uploader = ref(null)
const uploadSelect = (e, item, type) => {
  console.log('select', e, item, type, props.modelValue)
  const {tempFilePaths} = e
  uni.compressImage({
    src: tempFilePaths[0],
    quality: 80,
    compressedWidth: 800,
    success: res => {
      console.log(res.tempFilePath)
      uni.uploadFile({
        url: props.url, //上传图片的后端接口
        filePath: res.tempFilePath,
        name: 'file',
        success: res => {
          console.log('rrrrrrrrr', res, res.data)
          if(JSON.parse(res.data).code !== 200) {
            uni.showToast({
              title: res.msg
            })
            return
          }
          emit('update:modelValue', [
            ...props.modelValue,
            ...[
              {
                [props.typeField]: props.type,
                url: host + JSON.parse(res.data).fileName,
                [props.urlField]: JSON.parse(res.data).fileName
              }
            ]
          ])
        }
      })
    }
  })
}
const vm = computed({
  get: () => {
    console.log('getvm', props.modelValue)
    return props.modelValue
  },
  set: (v) => {
    console.log('setvm', v)
    emit('update:modelValue', v)
  }
})
console.log('vm', vm.value)
const uploadProgress = (e, item, type) => {
  console.log('progress', e, item, type)
}
const uploadSuccess = (e, item, type) => {
  console.log('success', e, item, type)
  // if (type === 'check') {
  //   item.photo = data.data.data.fileName
  // }
  // if (type === 'rectify') {
  //   item.photo = data.data.data.fileName
  // }
}
const uploadFail = (e, item, type) => {
  console.log('fail', e, item, type)
}
const uploadDel = (e) => {
  console.log('e', e)
  console.log('vm.value', vm.value)
  emit('uploadDel', e.tempFile)
}
</script>

<template>
  <uni-file-picker
      v-model="vm"
      ref="uploader"
      v-bind="$attrs"
      mode="grid"
      :limit="limit"
      :autoUpload="false"
      :del-icon="del"
      @select="(e) => uploadSelect(e, item, type)"
      @progress="(e) => uploadProgress(e, item, type)"
      @success="(e) => uploadSuccess(e, item, type)"
      @fail="(e) => uploadFail(e, item, type)"
      @delete="(e) => uploadDel(e, item, type)"
  />
</template>

<style scoped lang="scss">

</style>
